<template>
  <view class="">
    <van-popup
      :show="showPopup"
      :round="round"
      :position="position"
      :custom-style="`height: auto;overflow: visible !important;width:${width};padding:${padding};background:${background};height:${height}`"
      z-index="999999"
      @close="closePopup"
      :close-on-click-overlay="overlayClose"
    >
      <view class="spill-span flex-center-column" v-if="showSpill">
        <slot name="icon">
          <img style="width: 70rpx; height: 70rpx" src="https://julian-resource.oss-cn-shanghai.aliyuncs.com/xinqiao/popup_center_icon.png" alt="" />
        </slot>
      </view>
      <slot name="content"></slot>
    </van-popup>
  </view>
</template>
<script>
export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: 'auto'
    },
    padding: {
      type: String,
      default: '0'
    },
    position: {
      type: String,
      default: 'bottom'
    },
    showPopup: {
      type: Boolean,
      default: false
    },
    showSpill: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    background: {
      type: String,
      default: '#ffffff'
    },
    overlayClose: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  onLoad() {},
  methods: {
    closePopup() {
      this.$emit('update:showPopup', false)
    }
  },
  mounted() {}
}
</script>
<style lang="less" scoped>
.spill-span {
  width: 120rpx;
  height: 120rpx;
  background-color: #1e53c3;
  border-radius: 50%;
  position: relative;
  margin: auto;
  margin-top: -60rpx;
  left: 0;
  right: 0;
}
</style>
